<template>
	<view class="login">
		<image class="bg" :src="baseImgUrl+'login/bg.png'" mode=""></image>
		<view class="userInfo">

		</view>
		<!-- <view class="btn" @click="loginEv">
			本机号码一键登录
		</view> -->
		<button class="btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="isLogin">本机号码一键登录</button>
		<button class="btn" open-type="getPhoneNumber" :disabled="true" style="opacity: 0.6;" v-else>. . .登录中</button>
		<view class="login-agreement-model">
			<u-checkbox-group @change="changeAgreement" class="radio-box" @click="checkHandler">
				<u-checkbox v-model="agreement" shape="circle" label=" " name="1"></u-checkbox>
			</u-checkbox-group>
			<view class="">
				<text>使用本机号码一键登录即代表已同意</text>
				<text class="agreement-name" @click.stop="openPrivacy">《{{protocol1}}》</text>
				<!-- <text>和</text>
				<text class="agreement-name" @click.stop="openPrivacy(1)">《{{protocol2}}》</text> -->
				<text>并使用本机号码登录</text>
			</view>
		</view>
		<view class="vx-login">
			<image :src="baseImgUrl+'login/wx.png'" mode=""></image>
		</view>

		<!-- <view class=""></view> -->
	</view>
</template>

<script>
	import Common from "@/api/common.js"
	import {
		setToken
	} from '../../utils/auth'
	import Login from '@/api/login.js'
	import {
		baseUrl,
		baseImgUrl
	} from '@/config'
	export default {
		data() {
			return {
				baseImgUrl,
				agreement: [],
				protocol1: null,
				protocol2: null,
				isLogin: true
			}
		},
		async onLoad() {
			this.protocol1 = await this.getAgreements('8')
			this.protocol2 = await this.getAgreements('9')
		},
		methods: {
			checkHandler() {
				console.log(888);
			},
			loginEv() {
				console.log(this.agreement)
				if (this.agreement.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '请勾选协议'
					})
					return;
				} else {
					// #ifdef MP-WEIXIN
					wx.login({
						success(res) {
							if (res.code) {
								let code = res.code;
								Login.loginOpenid({
									code
								}).then(res => {

								})
								//发起网络请求
								console.log(code);
								setToken(
									"eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjYxMTE0ZjdhLTNkNTktNDExOC05ZTA3LTU3NjViN2Q3ZTE3YyJ9.XhkwKfBYFG0OLUNOtJgU8k8RQBr3-sfyO0sAvCTvxehkK1v8nuYzOVekO2Bj3ZZIrGT6qvJquafllyA_rsgkGQ"
								);
								// uni.switchTab({
								// 	url: "/pages/home"
								// })
							} else {
								console.log('登录失败！' + res.errMsg)
							}
						}
					})
					// #endif

				}
			},
			changeAgreement(e) {
				this.agreement = e;
				console.log(e)
			},
			async getPhoneNumber(e) {
				this.isLogin = false
				console.log(e)
				if (this.agreement.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '请勾选协议'
					})
					this.isLogin = true
					return;
				}
				if (e.mp.detail.errMsg === 'getPhoneNumber:ok') {
					const loginRes = await uni.login();
					console.log(loginRes)
					if (loginRes[1].code) {
						console.log(loginRes[1].code)
						const params = {
							code: loginRes[1].code,
							phoneCode: e.detail.code,
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv,
							sessionKey: ""
						}
						console.log(params, 888)
						const res = await Login.loginOpenid(params)
						console.log(res)
						if (res.code === 200) {
							this.isLogin = true
							uni.setStorageSync('token', res.token);
							uni.switchTab({
								url: "/pages/home"
							})
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: '登录失败'
						})
						this.isLogin = true
						console.log('登录失败！' + loginRes.errMsg)
					}
				} else {
					// 用户拒绝授权
					this.isLogin = true
					console.log('用户拒绝授权')
				}
			},
			async getAgreements(id) {
				let res = await Common.getAgreements(id);
				if (res.code == 200) {
					return res.data.title
				}
			},
			openPrivacy(type) {
				uni.navigateTo({
					url: `/subPages/mine/publicAgreement?id=${type == 1 ? '9' : '8'}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100vw;
		height: 100vh;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;

		.bg {
			width: 100%;
			height: 70vh;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 0;
		}

		.btn {
			width: 80vw;
			height: 88rpx;
			background: $main-color;
			color: #fff;
			border-radius: 44rpx;
			font-size: 30rpx;
			text-align: center;
			line-height: 88rpx;
			z-index: 1;
			margin-top: 900rpx;
		}

		.vx-login {
			// display: flex;
			// justify-content: center;
			position: absolute;
			bottom: 10%;
			transform: translate(50%, 50%);
			width: 100%;

			image {
				width: 88rpx;
				height: 88rpx;
				transform: translate(-50%, -50%);
			}
		}

		.login-agreement-model {
			padding: 0 28rpx;
			display: flex;
			// margin-top: 30px;
			width: 100%;
			padding-top: 30px;
			padding-bottom: env(safe-area-inset-bottom);
			z-index: 10;
			
			::v-deep .u-checkbox {
				width: 60rpx;
				display: flex;
				justify-content: center;
			}

			.radio-box {
				width: 50rpx;
				height: 50rpx;

				.raio-item {}
			}

			text {
				font-size: 24rpx;
				color: $main-font-auxiliary;
			}

			.agreement-name {
				color: $main-color;
			}

		}
	}
</style>